{extend name="layout:base" /}

{block name="main"}
<div class="path">
    <div class="row">
        <div class="col-xs-12 col-sm-5 col-lg-6 pt-1">
            <div class="btn-toolbar" role="toolbar">
                <?php if (!$isNormalEditor) { ?>
                <div class="btn-group js-ace-toolbar">
                    <button data-cmd="none" data-option="fullscreen" class="btn btn-sm btn-outline-secondary" id="js-ace-fullscreen" title="{:lng('Fullscreen')}"><i class="fa fa-expand" title="{:lng('Fullscreen')}"></i></button>
                    <button data-cmd="find" class="btn btn-sm btn-outline-secondary" id="js-ace-search" title="{:lng('Search')}"><i class="fa fa-search" title="{:lng('Search')}"></i></button>
                    <button data-cmd="undo" class="btn btn-sm btn-outline-secondary" id="js-ace-undo" title="{:lng('Undo')}"><i class="fa fa-undo" title="{:lng('Undo')}"></i></button>
                    <button data-cmd="redo" class="btn btn-sm btn-outline-secondary" id="js-ace-redo" title="{:lng('Redo')}"><i class="fa fa-repeat" title="{:lng('Redo')}"></i></button>
                    <button data-cmd="none" data-option="wrap" class="btn btn-sm btn-outline-secondary" id="js-ace-wordWrap" title="{:lng('Word Wrap')}"><i class="fa fa-text-width" title="{:lng('Word Wrap')}"></i></button>
                    <select id="js-ace-mode" data-type="mode" title="{:lng('Select Document Type')}" class="btn-outline-secondary border-start-0 d-none d-md-block"><option>-- {:lng('Select Mode')} --</option></select>
                    <select id="js-ace-theme" data-type="theme" title="{:lng('Select Theme')}" class="btn-outline-secondary border-start-0 d-none d-lg-block"><option>-- {:lng('Select Theme')} --</option></select>
                    <select id="js-ace-fontSize" data-type="fontSize" title="{:lng('Select Font Size')}" class="btn-outline-secondary border-start-0 d-none d-lg-block"><option>-- {:lng('Select Font Size')} --</option></select>
                </div>
                <?php } ?>
            </div>
        </div>
        <div class="edit-file-actions col-xs-12 col-sm-7 col-lg-6 text-end pt-1">
            <a title="{:lng('Back')}" class="btn btn-sm btn-light" href="{:addon_url('admin/index/detail', ['p' => FM_PATH, 'f' => $file])}"><i class="fa fa-reply-all"></i> {:lng('Back')}</a>
            <a title="<?php echo lng('BackUp') ?>" class="btn btn-sm btn-outline-primary" href="javascript:void(0);" onclick="backup('{:trim(FM_PATH)}', '{:urlencode($file)}')"><i class="fa fa-database"></i> {:lng('BackUp')}</a>
            <?php if ($is_text) { ?>
            <?php if ($isNormalEditor) { ?>
            <a title="Advanced" class="btn btn-sm btn-outline-primary" href="?p=<?php echo urlencode(trim(FM_PATH)) ?>&amp;edit=<?php echo urlencode($file) ?>&amp;env=ace"><i class="fa fa-pencil-square-o"></i> {:lng('AdvancedEditor')}</a>
            <button type="button" class="btn btn-sm btn-primary" name="Save" data-url="<?php echo fm_enc($file_url) ?>" onclick="edit_save(this,'nrl')"><i class="fa fa-floppy-o"></i> {:lng('Save')}
            </button>
            <?php } else { ?>
            <a title="Plain Editor" class="btn btn-sm btn-outline-primary" href="?p=<?php echo urlencode(trim(FM_PATH)) ?>&amp;edit=<?php echo urlencode($file) ?>"><i class="fa fa-text-height"></i> {:lng('NormalEditor')}</a>
            <button type="button" class="btn btn-sm btn-primary" name="Save" data-url="{:fm_enc($file_url)}" onclick="edit_save(this,'ace')"><i class="fa fa-floppy-o"></i> {:lng('Save')}
            </button>
            <?php } ?>
            <?php } ?>
        </div>
    </div>
    <?php
        if ($is_text && $isNormalEditor) {
            echo '<textarea class="mt-2" id="normal-editor" rows="33" cols="120" style="width: 99.5%;">' . htmlspecialchars($content) . '</textarea>';
    echo '<script>document.addEventListener("keydown", function(e) {if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)  && e.keyCode == 83) { e.preventDefault();edit_save(this,"nrl");}}, false);</script>';
    } elseif ($is_text) {
    echo '<div id="editor" contenteditable="true">' . htmlspecialchars($content) . '</div>';
    } else {
    fm_set_msg(lng('FILE EXTENSION HAS NOT SUPPORTED'), 'error');
    }
    ?>
</div>

{:import_addon_public('css/vs.min.css')}
{:import_addon_public('js/highlight.min.js')}
<script>
    hljs.highlightAll();
    var isHighlightingEnabled = true;
</script>
{if !$isNormalEditor}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ext-language_tools.min.js" integrity="sha512-6g6cvocV7eT/J8L44lL8gJKqq9onqQeYGgJO0DmrsYFcCfRl6wYkYA/KHS768r4QVTB4JxsCcMQ9gIezxpTCZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    var editor = ace.edit("editor");
    editor.getSession().setMode({path: "ace/mode/<?php echo $ext; ?>", inline: true});
    //editor.setTheme("ace/theme/twilight"); //Dark Theme
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion:true
    });

    editor.setShowPrintMargin(false); // Hide the vertical ruler
    function ace_commend(cmd) {
        editor.commands.exec(cmd, editor);
    }

    editor.commands.addCommands([{
        name: 'save', bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
        exec: function (editor) {
            edit_save(this, 'ace');
        }
    }]);

    function renderThemeMode() {
        var $modeEl = $("select#js-ace-mode"), $themeEl = $("select#js-ace-theme"),
                $fontSizeEl = $("select#js-ace-fontSize"), optionNode = function (type, arr) {
                    var $Option = "";
                    $.each(arr, function (i, val) {
                        $Option += "<option value='" + type + i + "'>" + val + "</option>";
                    });
                    return $Option;
                },
                _data = {
                    "aceTheme": {
                        "bright": {
                            "chrome": "Chrome",
                            "clouds": "Clouds",
                            "crimson_editor": "Crimson Editor",
                            "dawn": "Dawn",
                            "dreamweaver": "Dreamweaver",
                            "eclipse": "Eclipse",
                            "github": "GitHub",
                            "iplastic": "IPlastic",
                            "solarized_light": "Solarized Light",
                            "textmate": "TextMate",
                            "tomorrow": "Tomorrow",
                            "xcode": "XCode",
                            "kuroir": "Kuroir",
                            "katzenmilch": "KatzenMilch",
                            "sqlserver": "SQL Server"
                        },
                        "dark": {
                            "ambiance": "Ambiance",
                            "chaos": "Chaos",
                            "clouds_midnight": "Clouds Midnight",
                            "dracula": "Dracula",
                            "cobalt": "Cobalt",
                            "gruvbox": "Gruvbox",
                            "gob": "Green on Black",
                            "idle_fingers": "idle Fingers",
                            "kr_theme": "krTheme",
                            "merbivore": "Merbivore",
                            "merbivore_soft": "Merbivore Soft",
                            "mono_industrial": "Mono Industrial",
                            "monokai": "Monokai",
                            "pastel_on_dark": "Pastel on dark",
                            "solarized_dark": "Solarized Dark",
                            "terminal": "Terminal",
                            "tomorrow_night": "Tomorrow Night",
                            "tomorrow_night_blue": "Tomorrow Night Blue",
                            "tomorrow_night_bright": "Tomorrow Night Bright",
                            "tomorrow_night_eighties": "Tomorrow Night 80s",
                            "twilight": "Twilight",
                            "vibrant_ink": "Vibrant Ink"
                        }
                    },
                    "aceMode": {
                        "javascript": "JavaScript",
                        "abap": "ABAP",
                        "abc": "ABC",
                        "actionscript": "ActionScript",
                        "ada": "ADA",
                        "apache_conf": "Apache Conf",
                        "asciidoc": "AsciiDoc",
                        "asl": "ASL",
                        "assembly_x86": "Assembly x86",
                        "autohotkey": "AutoHotKey",
                        "apex": "Apex",
                        "batchfile": "BatchFile",
                        "bro": "Bro",
                        "c_cpp": "C and C++",
                        "c9search": "C9Search",
                        "cirru": "Cirru",
                        "clojure": "Clojure",
                        "cobol": "Cobol",
                        "coffee": "CoffeeScript",
                        "coldfusion": "ColdFusion",
                        "csharp": "C#",
                        "csound_document": "Csound Document",
                        "csound_orchestra": "Csound",
                        "csound_score": "Csound Score",
                        "css": "CSS",
                        "curly": "Curly",
                        "d": "D",
                        "dart": "Dart",
                        "diff": "Diff",
                        "dockerfile": "Dockerfile",
                        "dot": "Dot",
                        "drools": "Drools",
                        "edifact": "Edifact",
                        "eiffel": "Eiffel",
                        "ejs": "EJS",
                        "elixir": "Elixir",
                        "elm": "Elm",
                        "erlang": "Erlang",
                        "forth": "Forth",
                        "fortran": "Fortran",
                        "fsharp": "FSharp",
                        "fsl": "FSL",
                        "ftl": "FreeMarker",
                        "gcode": "Gcode",
                        "gherkin": "Gherkin",
                        "gitignore": "Gitignore",
                        "glsl": "Glsl",
                        "gobstones": "Gobstones",
                        "golang": "Go",
                        "graphqlschema": "GraphQLSchema",
                        "groovy": "Groovy",
                        "haml": "HAML",
                        "handlebars": "Handlebars",
                        "haskell": "Haskell",
                        "haskell_cabal": "Haskell Cabal",
                        "haxe": "haXe",
                        "hjson": "Hjson",
                        "html": "HTML",
                        "html_elixir": "HTML (Elixir)",
                        "html_ruby": "HTML (Ruby)",
                        "ini": "INI",
                        "io": "Io",
                        "jack": "Jack",
                        "jade": "Jade",
                        "java": "Java",
                        "json": "JSON",
                        "jsoniq": "JSONiq",
                        "jsp": "JSP",
                        "jssm": "JSSM",
                        "jsx": "JSX",
                        "julia": "Julia",
                        "kotlin": "Kotlin",
                        "latex": "LaTeX",
                        "less": "LESS",
                        "liquid": "Liquid",
                        "lisp": "Lisp",
                        "livescript": "LiveScript",
                        "logiql": "LogiQL",
                        "lsl": "LSL",
                        "lua": "Lua",
                        "luapage": "LuaPage",
                        "lucene": "Lucene",
                        "makefile": "Makefile",
                        "markdown": "Markdown",
                        "mask": "Mask",
                        "matlab": "MATLAB",
                        "maze": "Maze",
                        "mel": "MEL",
                        "mixal": "MIXAL",
                        "mushcode": "MUSHCode",
                        "mysql": "MySQL",
                        "nix": "Nix",
                        "nsis": "NSIS",
                        "objectivec": "Objective-C",
                        "ocaml": "OCaml",
                        "pascal": "Pascal",
                        "perl": "Perl",
                        "perl6": "Perl 6",
                        "pgsql": "pgSQL",
                        "php_laravel_blade": "PHP (Blade Template)",
                        "php": "PHP",
                        "puppet": "Puppet",
                        "pig": "Pig",
                        "powershell": "Powershell",
                        "praat": "Praat",
                        "prolog": "Prolog",
                        "properties": "Properties",
                        "protobuf": "Protobuf",
                        "python": "Python",
                        "r": "R",
                        "razor": "Razor",
                        "rdoc": "RDoc",
                        "red": "Red",
                        "rhtml": "RHTML",
                        "rst": "RST",
                        "ruby": "Ruby",
                        "rust": "Rust",
                        "sass": "SASS",
                        "scad": "SCAD",
                        "scala": "Scala",
                        "scheme": "Scheme",
                        "scss": "SCSS",
                        "sh": "SH",
                        "sjs": "SJS",
                        "slim": "Slim",
                        "smarty": "Smarty",
                        "snippets": "snippets",
                        "soy_template": "Soy Template",
                        "space": "Space",
                        "sql": "SQL",
                        "sqlserver": "SQLServer",
                        "stylus": "Stylus",
                        "svg": "SVG",
                        "swift": "Swift",
                        "tcl": "Tcl",
                        "terraform": "Terraform",
                        "tex": "Tex",
                        "text": "Text",
                        "textile": "Textile",
                        "toml": "Toml",
                        "tsx": "TSX",
                        "twig": "Twig",
                        "typescript": "Typescript",
                        "vala": "Vala",
                        "vbscript": "VBScript",
                        "velocity": "Velocity",
                        "verilog": "Verilog",
                        "vhdl": "VHDL",
                        "visualforce": "Visualforce",
                        "wollok": "Wollok",
                        "xml": "XML",
                        "xquery": "XQuery",
                        "yaml": "YAML",
                        "django": "Django"
                    },
                    "fontSize": {
                        8: 8,
                        10: 10,
                        11: 11,
                        12: 12,
                        13: 13,
                        14: 14,
                        15: 15,
                        16: 16,
                        17: 17,
                        18: 18,
                        20: 20,
                        22: 22,
                        24: 24,
                        26: 26,
                        30: 30
                    }
                };
        if (_data && _data.aceMode) {
            $modeEl.html(optionNode("ace/mode/", _data.aceMode));
        }
        if (_data && _data.aceTheme) {
            var lightTheme = optionNode("ace/theme/", _data.aceTheme.bright),
                    darkTheme = optionNode("ace/theme/", _data.aceTheme.dark);
            $themeEl.html("<optgroup label=\"Bright\">" + lightTheme + "</optgroup><optgroup label=\"Dark\">" + darkTheme + "</optgroup>");
        }
        if (_data && _data.fontSize) {
            $fontSizeEl.html(optionNode("", _data.fontSize));
        }
        $modeEl.val(editor.getSession().$modeId);
        $themeEl.val(editor.getTheme());
        $fontSizeEl.val(12).change(); //set default font size in drop down
    }

    $(function () {
        renderThemeMode();
        $(".js-ace-toolbar").on("click", 'button', function (e) {
            e.preventDefault();
            let cmdValue = $(this).attr("data-cmd"), editorOption = $(this).attr("data-option");
            if (cmdValue && cmdValue != "none") {
                ace_commend(cmdValue);
            } else if (editorOption) {
                if (editorOption == "fullscreen") {
                    (void 0 !== document.fullScreenElement && null === document.fullScreenElement || void 0 !== document.msFullscreenElement && null === document.msFullscreenElement || void 0 !== document.mozFullScreen && !document.mozFullScreen || void 0 !== document.webkitIsFullScreen && !document.webkitIsFullScreen)
                    && (editor.container.requestFullScreen ? editor.container.requestFullScreen() : editor.container.mozRequestFullScreen ? editor.container.mozRequestFullScreen() : editor.container.webkitRequestFullScreen ? editor.container.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) : editor.container.msRequestFullscreen && editor.container.msRequestFullscreen());
                } else if (editorOption == "wrap") {
                    let wrapStatus = (editor.getSession().getUseWrapMode()) ? false : true;
                    editor.getSession().setUseWrapMode(wrapStatus);
                }
            }
        });
        $("select#js-ace-mode, select#js-ace-theme, select#js-ace-fontSize").on("change", function (e) {
            e.preventDefault();
            let selectedValue = $(this).val(), selectionType = $(this).attr("data-type");
            if (selectedValue && selectionType == "mode") {
                editor.getSession().setMode(selectedValue);
            } else if (selectedValue && selectionType == "theme") {
                editor.setTheme(selectedValue);
            } else if (selectedValue && selectionType == "fontSize") {
                editor.setFontSize(parseInt(selectedValue));
            }
        });
    });
</script>
{/if}
{/block}